<template>
  <div>
    <a-card>
      <a-tabs
        v-model:activeKey="activeKey"
        tab-position="left"
        :tabBarGutter="100"
        @change="activeKeyChange"
      >
        <a-tab-pane v-for="item in stores" :key="item.id" :tab="item.value">
          <a-tabs
            v-model:activeKey="activeKeySon"
            tab-position="top"
            :tabBarGutter="400"
            @change="activeKeyChangeSon"
          >
            <a-tab-pane key="1" tab="待发货">
              <a-table
                :data-source="waitGoodsData"
                :loading="shipLoading"
                :pagination="false"
              >
                <a-table-column
                  fixed="left"
                  key="image"
                  title="商品信息"
                  data-index="image"
                  :ellipsis="true"
                  width="290px"
                >
                  <template #default="{ record }">
                    <a-image :width="100" :src="record.image" />
                    <span style="margin-left: 10px">{{ record.name }}</span>
                  </template>
                </a-table-column>
                <a-table-column
                  key="number"
                  width="100px"
                  title="数量"
                  data-index="number"
                >
                  <template #default="{ record }">
                    <a-tag color="blue">
                      <span style="font-size: 14px; font-weight: bold">{{
                        record.number
                      }}</span>
                    </a-tag>
                  </template>
                </a-table-column>
                <a-table-column
                  width="150px"
                  key="phone"
                  title="用户"
                  data-index="phone"
                >
                  <template #default="{ record }">
                    <a-tag color="red">
                      <span style="font-size: 14px; font-weight: bold">{{
                        record.phone
                      }}</span>
                    </a-tag>
                  </template>
                </a-table-column>
                <a-table-column
                  width="200px"
                  key="address"
                  title="地址"
                  data-index="address"
                  :ellipsis="false"
                >
                  <template #default="{ record }">
                    <span style="font-size: 13px;">{{
                      record.address
                    }}</span>
                  </template>
                </a-table-column>
                <a-table-column
                  width="150px"
                  fixed="right"
                  key="id"
                  title="状态"
                >
                  <template #default="{ record }">
                    <a-tag color="green">
                      <span style="font-size: 14px; font-weight: bold"
                        >待发货</span
                      >
                    </a-tag>
                  </template>
                </a-table-column>
                <a-table-column fixed="right" key="id" title="操作">
                  <template #default="{ record }">
                    <a-popconfirm
                      title="确认发货？"
                      ok-text="确认"
                      cancel-text="取消"
                      @confirm="doDelivery(record.id)"
                      @cancel="cancel"
                    >
                      <a-button type="primary" ghost
                        ><span>点击发货</span></a-button
                      >
                    </a-popconfirm>
                  </template>
                </a-table-column>
              </a-table>
              <!-- 分页 -->
              <div
                style="
                  height: 40px;
                  width: 100%;
                  margin-top: 30px;
                  display: flex;
                  justify-content: center;
                "
              >
                <a-pagination
                  v-model:current="pageNo"
                  v-model:page-size="pageSize"
                  :total="total"
                  @change="handlePageChangeWithWaitOrder"
                  :show-total="(total) => `共 ${total} 条`"
                />
              </div>
            </a-tab-pane>
            <a-tab-pane key="2" tab="待收货">
              <a-table
                :data-source="takeGoods"
                :loading="shipLoading"
                :pagination="false"
              >
                <a-table-column
                  fixed="left"
                  key="image"
                  title="商品信息"
                  data-index="image"
                  :ellipsis="true"
                  width="300px"
                >
                  <template #default="{ record }">
                    <a-image :width="100" :src="record.image" />
                    <span style="margin-left: 10px">{{ record.name }}</span>
                  </template>
                </a-table-column>
                <a-table-column
                  key="number"
                  width="140px"
                  title="数量"
                  data-index="number"
                >
                  <template #default="{ record }">
                    <a-tag color="blue">
                      <span style="font-size: 14px; font-weight: bold">{{
                        record.number
                      }}</span>
                    </a-tag>
                  </template>
                </a-table-column>
                <a-table-column
                  width="150px"
                  key="phone"
                  title="用户"
                  data-index="phone"
                >
                  <template #default="{ record }">
                    <a-tag color="red">
                      <span style="font-size: 14px; font-weight: bold">{{
                        record.phone
                      }}</span>
                    </a-tag>
                  </template>
                </a-table-column>
                <a-table-column
                  width="200px"
                  key="address"
                  title="地址"
                  data-index="address"
                  :ellipsis="false"
                >
                  <template #default="{ record }">
                    <span style="font-size: 13px;">{{
                      record.address
                    }}</span>
                  </template>
                </a-table-column>
                <a-table-column
                  width="150px"
                  fixed="right"
                  key="id"
                  title="状态"
                >
                  <template #default="{ record }">
                    <a-tag color="green">
                      <span style="font-size: 14px; font-weight: bold"
                        >待收货</span
                      >
                    </a-tag>
                  </template>
                </a-table-column>
              </a-table>
              <!-- 分页 -->
              <div
                style="
                  height: 40px;
                  width: 100%;
                  margin-top: 30px;
                  display: flex;
                  justify-content: center;
                "
              >
                <a-pagination
                  v-model:current="pageNo"
                  v-model:page-size="pageSize"
                  :total="total"
                  @change="handlePageChangeWithTakeOrder"
                  :show-total="(total) => `共 ${total} 条`"
                />
              </div>
            </a-tab-pane>
            <a-tab-pane key="3" tab="已收货">
              <a-table
                :data-source="receivedGoods"
                :loading="shipLoading"
                :pagination="false"
              >
                <a-table-column
                  fixed="left"
                  key="image"
                  title="商品信息"
                  data-index="image"
                  :ellipsis="true"
                  width="300px"
                >
                  <template #default="{ record }">
                    <a-image :width="100" :src="record.image" />
                    <span style="margin-left: 10px">{{ record.name }}</span>
                  </template>
                </a-table-column>
                <a-table-column
                  key="number"
                  width="140px"
                  title="数量"
                  data-index="number"
                >
                  <template #default="{ record }">
                    <a-tag color="blue">
                      <span style="font-size: 14px; font-weight: bold">{{
                        record.number
                      }}</span>
                    </a-tag>
                  </template>
                </a-table-column>
                <a-table-column
                  width="150px"
                  key="phone"
                  title="用户"
                  data-index="phone"
                >
                  <template #default="{ record }">
                    <a-tag color="red">
                      <span style="font-size: 14px; font-weight: bold">{{
                        record.phone
                      }}</span>
                    </a-tag>
                  </template>
                </a-table-column>
                <a-table-column
                  width="200px"
                  key="address"
                  title="地址"
                  data-index="address"
                  :ellipsis="false"
                >
                  <template #default="{ record }">
                    <span style="font-size: 13px;">{{
                      record.address
                    }}</span>
                  </template>
                </a-table-column>
                <a-table-column
                  width="150px"
                  fixed="right"
                  key="id"
                  title="状态"
                >
                  <template #default="{ record }">
                    <a-tag color="green">
                      <span style="font-size: 14px; font-weight: bold"
                        >已收货</span
                      >
                    </a-tag>
                  </template>
                </a-table-column>
              </a-table>
              <!-- 分页 -->
              <div
                style="
                  height: 40px;
                  width: 100%;
                  margin-top: 30px;
                  display: flex;
                  justify-content: center;
                "
              >
                <a-pagination
                  v-model:current="pageNo"
                  v-model:page-size="pageSize"
                  :total="total"
                  @change="handlePageChangeWithReceivedOrder"
                  :show-total="(total) => `共 ${total} 条`"
                />
              </div>
            </a-tab-pane>
          </a-tabs>
        </a-tab-pane>
      </a-tabs>

      <!-- 空状态 -->
      <div
        v-if="isHaveStore"
        style="
          width: 100%;
          height: 80vh;
          display: flex;
          justify-content: center;
          align-items: center;
        "
      >
        <a-empty>
          <template #description>
            <span style="color: coral"> 暂无任何订单商品，请先创建店铺! </span>
          </template>
        </a-empty>
      </div>
    </a-card>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { getStores } from "@/api/goods";
import { useAdminStore } from "@/stores/admin";
import {
  getWaitOrders,
  toDoDelivery,
  getTakeGoods,
  getReceivedGoods,
} from "@/api/usergoodslog";
import { message } from "ant-design-vue";

const pageNo = ref(1);
const pageSize = ref(10);
const total = ref(0);
const activeKey = ref("1");
const activeKeySon = ref("1");
const adminStore = useAdminStore();
const stores = ref([]);
const isHaveStore = ref(false);
onMounted(() => {
  //获取商品店铺
  getStores(adminStore.admin.key).then((res) => {
    if (res.code === 200 && res.data !== null) {
      stores.value = res.data;
    } else {
      isHaveStore.value = true;
    }
  });
});

//监听标签页改变
const storeId = ref(null);
function activeKeyChange(key) {
  storeId.value = key;
  getWaitOrderData();
}

//监听标签页改变
function activeKeyChangeSon(key) {
  switch (key) {
    case "1":
      getWaitOrderData();
      break;
    case "2":
      getTakeGoodsData();
      break;
    case "3":
      getReceivedData();
      break;
    default:
      break;
  }
}

//获取待发货商品
const waitGoodsData = ref([]);
function getWaitOrderData() {
  getWaitOrders(pageNo.value, pageSize.value, storeId.value).then((res) => {
    if (res.code === 200 && res.data !== null) {
      waitGoodsData.value = res.data.data;
      total.value = res.data.total;
    } else {
      waitGoodsData.value = null;
      total.value = 0;
    }
  });
}

//获取待收货商品
const takeGoods = ref([]);
function getTakeGoodsData() {
  getTakeGoods(pageNo.value, pageSize.value, storeId.value).then((res) => {
    if (res.code === 200 && res.data !== null) {
      takeGoods.value = res.data.data;
      total.value = res.data.total;
    } else {
      takeGoods.value = null;
      total.value = 0;
    }
  });
}

//获取已收货商品
const receivedGoods = ref([]);
function getReceivedData() {
  getReceivedGoods(pageNo.value, pageSize.value, storeId.value).then((res) => {
    if (res.code === 200 && res.data !== null) {
      receivedGoods.value = res.data.data;
      total.value = res.data.total;
    } else {
      receivedGoods.value = null;
      total.value = 0;
    }
  });
}

//监听待发货分页变化
function handlePageChangeWithWaitOrder(param1, param2) {
  pageNo.value = param1;
  pageSize.value = param2;
  getWaitOrderData();
}

//监听待收货分页变化
function handlePageChangeWithTakeOrder(param1, param2) {
  pageNo.value = param1;
  pageSize.value = param2;
  getTakeGoodsData();
}

//监听待收货分页变化
function handlePageChangeWithReceivedOrder(param1, param2) {
  pageNo.value = param1;
  pageSize.value = param2;
  getReceivedData();
}

//发货方法
function doDelivery(id) {
  toDoDelivery(id).then((res) => {
    if (res.code === 200) {
      message.success("成功发货！");
      getWaitOrderData();
    }
  });
}

//展示价格的小数方法
function towNumber(val) {
  return val.toFixed(2);
}
</script>
<style scoped>
</style>